<template>
  <dialog_item :dialogTitle="title" @onBtnDialogClick="onBtnDialogClick" :visible.sync="dialogVisible"  :dialogWidth="'30%'"
  :appendBody="'true'" dialogClass="dialogHeight" :isShowConfirmBtn="true">
    <department_tree 
    v-if="dialogVisible"
    @node-click="onNodeClick" 
    :invalid="invalid" 
    @checkAll="checkAll"  
    :departments="departments"
    :haveChange="haveChange"
    @changeStatus="changeStatus"
    :isUserTree="isUserTree"
    :disableRoot="showDisbaleRoot"
    :showBox="showBox"
    />
    </dialog_item>
</template>

<script>
import department_tree from "@/components/department_tree.vue";
export default {
  components: {
    department_tree
  },
  props: {
    visible: Boolean,
    invalid: Boolean,
    departments: Array,
    isUserTree: {
      type: Boolean,
      default: false
    },
    showDisbaleRoot: Boolean,
    showBox: Boolean
  },
  data() {
    return {
      checkDept:{},
      checkedAll:[],
      haveChange:false,
      title:"",
    };
  },
  created(){
    if(this.invalid){
      this.title=this.$t('add_dept')
    }else{
      this.title=this.$t('select_superior_dept')
    }
  },
  computed: {
    dialogVisible: {
      get() {
        return this.visible;
      },
      set(val) {
        this.$emit("update:visible", val);
      }
    }
  },

  methods: {
    onBtnDialogClick(name){
      if(name=='confirm'){
        if(this.invalid){
          this.onAddDeptOk()
        }else{
          this.onOk()
        }
      }
    },
    changeStatus(val){
      this.haveChange=val;
    },             
    onNodeClick(dept) {
      this.checkDept=dept;
    },
    checkAll(all){
      this.checkedAll=all;
    },
    onOk(){
      if(this.checkDept=={}){
        this.$message({
          showClose: true,
          message: this.$t("select_department_required"),
          type: "error"
        });
        return false;
      }else{
        this.dialogVisible = false;
        this.$emit("select-ok", this.checkDept);
      }

      
    },
    onAddDeptOk(){
      if(!this.checkDept.title&&!this.checkDept.name){
          this.$message({
            showClose:true,
            message:this.$t("select_department_required"),
            type:"error"
          })
          return false
      }
      else{
      this.dialogVisible = false;
      if(this.checkedAll.length==0 && !this.haveChange){
        this.checkedAll=this.departments;
      }
      if(!this.showBox){
        this.$emit("select-ok", this.checkDept);
      }else{
        this.$emit("select-ok", this.checkedAll);
      }
      }
    },
    onCancel(){
      this.dialogVisible = false;
    },
    handleClose() {
      this.dialogVisible = false;
    }
  }
};
</script>

<style lang="scss" scoped>
</style>